<!-- MIT License

Copyright (c) 2025 Wufeng Song

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意文案生成器 | Creative Copy Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto { content-visibility: auto; }
            .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
            .transition-custom { transition: all 0.3s ease; }
            .card-hover { @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300; }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-slate-100 min-h-screen font-sans text-dark">

    <header class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-pencil-square-o text-primary text-2xl"></i>
                <h1 class="text-[clamp(1.2rem,3vw,1.8rem)] font-bold text-dark">创意文案生成器</h1>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8 max-w-5xl">

        <div class="bg-white rounded-xl shadow-md p-6 mb-8 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-3">释放你的创意潜能</h2>
            <p class="text-slate-600 max-w-2xl mx-auto">
                只需几步简单设置，即可生成符合产品特性和场景需求的高质量创意文案，为你的营销活动注入灵感与活力。
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div class="lg:col-span-5">
                <div class="bg-white rounded-xl shadow-md p-6 h-full card-hover">
                    <h3 class="text-xl font-semibold mb-5 flex items-center">
                        <i class="fa fa-sliders text-primary mr-2"></i>文案参数设置
                    </h3>

                    <form id="copyForm" class="space-y-5">
                        <div class="form-group">
                            <label for="product_type" class="block text-sm font-medium text-slate-700 mb-1">
                                产品类型 <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                                    <i class="fa fa-tag"></i>
                                </span>
                                <input type="text" id="product_type"
                                    class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                                    placeholder="例如：蓝牙耳机、奶茶、运动鞋" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="scenario" class="block text-sm font-medium text-slate-700 mb-1">应用场景</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                                    <i class="fa fa-map-marker"></i>
                                </span>
                                <select id="scenario"
                                    class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                    <option value="社交媒体推广">社交媒体推广</option>
                                    <option value="电商详情页">电商详情页</option>
                                    <option value="海报宣传">海报宣传</option>
                                    <option value="短视频脚本">短视频脚本</option>
                                    <option value="产品手册">产品手册</option>
                                    <option value="广告语">广告语</option>
                                </select>
                                <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-500">
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="style" class="block text-sm font-medium text-slate-700 mb-1">文案风格</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                                    <i class="fa fa-paint-brush"></i>
                                </span>
                                <select id="style"
                                    class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                    <option value="活泼俏皮">活泼俏皮</option>
                                    <option value="文艺清新">文艺清新</option>
                                    <option value="科技感">科技感</option>
                                    <option value="温情走心">温情走心</option>
                                    <option value="专业严谨">专业严谨</option>
                                    <option value="幽默风趣">幽默风趣</option>
                                </select>
                                <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-500">
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="keywords" class="block text-sm font-medium text-slate-700 mb-1">
                                关键词（用逗号分隔）
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                                    <i class="fa fa-key"></i>
                                </span>
                                <input type="text" id="keywords"
                                    class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"
                                    placeholder="例如：降噪、轻便、高颜值">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="count" class="block text-sm font-medium text-slate-700 mb-1">生成数量</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500">
                                    <i class="fa fa-list-ol"></i>
                                </span>
                                <input type="number" id="count" value="3" min="1" max="10"
                                    class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            </div>
                        </div>

                        <button type="submit" id="generateBtn"
                            class="w-full bg-gradient-to-r from-primary to-accent text-white font-medium py-3 px-4 rounded-lg hover:opacity-90 active:scale-98 transition-custom flex items-center justify-center">
                            <i class="fa fa-magic mr-2"></i> 生成创意文案
                        </button>
                    </form>
                </div>
            </div>

            <div class="lg:col-span-7">
                <div class="bg-white rounded-xl shadow-md p-6 h-full card-hover">
                    <h3 class="text-xl font-semibold mb-5 flex items-center">
                        <i class="fa fa-lightbulb-o text-accent mr-2"></i>生成结果
                    </h3>

                    <div id="initialState" class="text-center py-16 text-slate-400">
                        <i class="fa fa-file-text-o text-5xl mb-4 opacity-30"></i>
                        <p>填写左侧表单并点击生成按钮，创意文案将显示在这里</p>
                    </div>
                    <div id="loadingState" class="text-center py-16 hidden">
                        <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
                        <p class="text-slate-600">正在激发创意灵感...</p>
                    </div>

                    <div id="result" class="space-y-4 hidden">
                    </div>

                    <div id="errorState" class="text-center py-16 text-red-500 hidden">
                        <i class="fa fa-exclamation-triangle text-5xl mb-4"></i>
                        <p id="errorMessage">生成失败，请尝试调整参数</p>
                    </div>

                    <div class="mt-6 hidden" id="actionButtons">
                        <div class="flex flex-wrap gap-3">
                            <button id="regenerateBtn"
                                class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium py-2 px-4 rounded-lg transition-custom flex items-center justify-center">
                                <i class="fa fa-refresh mr-2"></i> 重新生成
                            </button>
                            <button id="copyAllBtn"
                                class="flex-1 bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-custom flex items-center justify-center">
                                <i class="fa fa-copy mr-2"></i> 复制全部
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-12">
            <h3 class="text-xl font-semibold mb-5 flex items-center">
                <i class="fa fa-star text-yellow-500 mr-2"></i>文案示例
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white rounded-lg p-4 shadow-sm border border-slate-100">
                    <p class="text-sm text-slate-500 mb-2">产品：机械键盘 | 风格：科技感</p>
                    <p class="italic text-slate-700">"精密齿轮咬合每一微秒，机械结构爆发出撕裂虚空的精准，制霸电竞星海！"</p>
                </div>
                <div class="bg-white rounded-lg p-4 shadow-sm border border-slate-100">
                    <p class="text-sm text-slate-500 mb-2">产品：奶茶 | 风格：活泼俏皮</p>
                    <p class="italic text-slate-700">"一口解锁快乐密码！丝滑奶盖碰撞清新果味，甜蜜能量瞬间满格～"</p>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white/80 py-8 mt-16">
        <div class="container mx-auto px-4 text-center">
            <p>创意文案生成器 &copy; 2025 | 基于 LazyLLM 构建</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="https://gitcode.com/2401_86455622/CreativeCopyGenerator.git" class="hover:text-white transition-custom"><i class="fa fa-github"></i></a>
                <a href="#" class="hover:text-white transition-custom"><i class="fa fa-twitter"></i></a>
                <a href="#" class="hover:text-white transition-custom"><i class="fa fa-envelope"></i></a>
            </div>
        </div>
    </footer>
    <div id="toast" class="fixed bottom-5 right-5 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
        <i id="toastIcon" class="fa fa-check-circle mr-2"></i>
        <span id="toastMessage"></span>
    </div>

    <script>
        const form = document.getElementById('copyForm');
        const initialState = document.getElementById('initialState');
        const loadingState = document.getElementById('loadingState');
        const resultDiv = document.getElementById('result');
        const errorState = document.getElementById('errorState');
        const errorMessage = document.getElementById('errorMessage');
        const actionButtons = document.getElementById('actionButtons');
        const regenerateBtn = document.getElementById('regenerateBtn');
        const copyAllBtn = document.getElementById('copyAllBtn');
        const generateBtn = document.getElementById('generateBtn');
        const toast = document.getElementById('toast');
        const toastIcon = document.getElementById('toastIcon');
        const toastMessage = document.getElementById('toastMessage');
        function showToast(message, isSuccess = true) {
            toastMessage.textContent = message;
            toastIcon.className = isSuccess ? 'fa fa-check-circle mr-2' : 'fa fa-exclamation-circle mr-2';
            toastIcon.style.color = isSuccess ? '#10B981' : '#EF4444';

            toast.classList.remove('translate-y-20', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');

            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }

        async function generateCopy() {
            initialState.classList.add('hidden');
            resultDiv.classList.add('hidden');
            errorState.classList.add('hidden');
            actionButtons.classList.add('hidden');
            loadingState.classList.remove('hidden');
            generateBtn.disabled = true;
            generateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 生成中...';

            const data = {
                product_type: document.getElementById('product_type').value,
                scenario: document.getElementById('scenario').value,
                style: document.getElementById('style').value,
                keywords: document.getElementById('keywords').value.split(',').map(k => k.trim()).filter(k => k),
                count: parseInt(document.getElementById('count').value)
            };

            try {
                const response = await fetch('/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });

                if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);

                const result = await response.json();
                loadingState.classList.add('hidden');

                if (result.copy_list && result.copy_list.length > 0) {
                    resultDiv.innerHTML = result.copy_list.map((copy, i) => `
                        <div class="copy-item bg-slate-50 rounded-lg p-4 border border-slate-100 relative group">
                            <p class="text-slate-800">${copy}</p>
                            <button class="copy-btn absolute top-3 right-3 text-slate-400 hover:text-primary opacity-0 group-hover:opacity-100 transition-custom"
                                data-text="${copy}">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    `).join('');

                    resultDiv.classList.remove('hidden');
                    actionButtons.classList.remove('hidden');
                    document.querySelectorAll('.copy-btn').forEach(btn => {
                        btn.addEventListener('click', () => {
                            navigator.clipboard.writeText(btn.dataset.text)
                                .then(() => showToast('文案已复制'))
                                .catch(() => showToast('复制失败，请手动复制', false));
                        });
                    });
                } else {
                    errorMessage.textContent = "未生成有效文案，请调整参数后重试";
                    errorState.classList.remove('hidden');
                }
            } catch (error) {
                loadingState.classList.add('hidden');
                errorMessage.textContent = `生成失败：${error.message}`;
                errorState.classList.remove('hidden');
            } finally {
                generateBtn.disabled = false;
                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i> 生成创意文案';
            }
        }
        form.addEventListener('submit', (e) => { e.preventDefault(); generateCopy(); });
        regenerateBtn.addEventListener('click', generateCopy);
        copyAllBtn.addEventListener('click', () => {
            const allText = Array.from(document.querySelectorAll('.copy-item p'))
                .map(item => item.textContent).join('\n\n');
            navigator.clipboard.writeText(allText)
                .then(() => showToast('全部文案已复制'))
                .catch(() => showToast('复制失败，请手动复制', false));
        });
    </script>
</body>
</html>